<template>
  <div>
    <el-card class="myinfo">
      <el-tabs v-model="activeName">
        <el-tab-pane label="个人信息" name="first">
          <el-row class="imgRow" type="flex">
            <img class="imgti" src="../../assets/common/head.jpg" alt="" />
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="活动时间">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.date1"
                    style="width: 204px;"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
            </el-form>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      activeName: 'first',
      form: {}
    }
  },
  conputed: {
    ...mapGetters(['name', 'avatar'])
  }
}
</script>

<style>
.myinfo {
  margin: 30px;
}
.imgti {
  height: 100px;
  width: 100px;
}
.imgRow {
  margin-top: 30px;
}
.el-form {
  margin-left: 80px;
}
</style>
